import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入注册vant组件模块
import './vant'

// 导入amfe-flexible
// 作用是把手机屏幕划分为10等份作为html字体大小
import 'amfe-flexible'

// 导入自定义指令
import './directive/index'

// 导入代码高亮的包
import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css'// 代码高亮的样式

// 导入自定义插件对象
import My from '@/plugin/index'
// 注册自定义插件
// 把插件对象作为参数传给Vue.use()，内部会立即调用插件对象的 install 方法，并且会把Vue构造函数传给 install
Vue.use(My)

Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
  const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
  highlight.forEach((block) => {
    hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
  })
})

// 配置环境变量的作用：在不同环境下读取到的变量值不同
// 获取环境变量的值
// 注意：
// 1.环境变量名称要全大写，不同单词之间用 _ 连接，不然会被 webpack 屏蔽
// 2.通过process.env.环境变量名获取值
console.log(process.env.NODE_ENV)
if (process.env.NODE_ENV !== 'dev') { // 当前环境不是开发环境的话
  // 覆盖 console 对象几个打印日志的函数
  console.log = function () { }
  console.dir = function () { }
  console.error = function () { }
}

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
